import React from 'react';
import { Modal, Descriptions, Table } from 'antd';

import { StrategyInfo } from '../../../../schema/Strategy';
import '../style.scss';
const { Column } = Table;
/**
 * 策略项信息详情props
 */
interface Iprops {
  // 对话框可见性
  visible: boolean;
  // 所要展示的数据详情
  StrategyInfo?: StrategyInfo;
  // 对话框关闭时的回调
  onClose: () => void;
}

/**
 * 策略项信息详情对话框
 */
export const StrategyCheckDetail: React.FC<Iprops> = (props: Iprops) => {
  const prop = props.StrategyInfo as StrategyInfo;
  if (!props.visible) {
    return <></>;
  }

  return (
    <div>
      <Modal
        className="Strategy-check-detail"
        title="策略项详情"
        visible={props.visible}
        footer={null}
        onCancel={() => {
          props.onClose();
        }}
      >
        <Descriptions column={4}>
          <Descriptions.Item label="策略项名称" span={2}>
            {prop.strategyOptionName}
          </Descriptions.Item>
          <Descriptions.Item label="类型" span={2}>
            {prop.type === 'compare' ? '比较' : '--'}
          </Descriptions.Item>
          <Descriptions.Item label="参考项名称" span={2}>
            {prop.referName}
          </Descriptions.Item>
          <Descriptions.Item label="参考列" span={2}>
            {prop.referColumn}
          </Descriptions.Item>
        </Descriptions>

        <Table pagination={false} dataSource={prop.values}>
          <Column
            title="序号"
            dataIndex="index"
            key="index"
            render={(text, record, index) => `${index + 1}`}
          />
          <Column
            title="显示"
            dataIndex="key"
            key="key"
            render={(text: any, record, index) => {
              return text ? text : '--';
            }}
          />
          <Column
            title="值"
            dataIndex="value"
            key="value"
            render={(text: any, record, index) => {
              return text ? text : '--';
            }}
          />
        </Table>
      </Modal>
    </div>
  );
};
